

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>Table of Contents Editor &mdash; Sigil v0.4.1 documentation</title>
    <link rel="stylesheet" href="_static/custom.css" type="text/css" />
    <link rel="stylesheet" href="_static/pygments.css" type="text/css" />
    <script type="text/javascript">
      var DOCUMENTATION_OPTIONS = {
        URL_ROOT:    '',
        VERSION:     '0.4.1',
        COLLAPSE_INDEX: false,
        FILE_SUFFIX: '.html',
        HAS_SOURCE:  true
      };
    </script>
    <script type="text/javascript" src="_static/jquery.js"></script>
    <script type="text/javascript" src="_static/underscore.js"></script>
    <script type="text/javascript" src="_static/doctools.js"></script>
    <link rel="shortcut icon" href="_static/app_16.ico"/>
    <link rel="top" title="Sigil v0.4.1 documentation" href="index.html" />
    <link rel="next" title="EPUB Overview" href="epub_overview.html" />
    <link rel="prev" title="Meta Editor" href="meta_editor.html" />
 
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-6767398-2']);
  _gaq.push(['_trackPageview']);
</script>

  </head>
  <body>
    <div class="related">
      <h3>Navigation</h3>
      <ul>
        <li class="right" style="margin-right: 10px">
          <a href="genindex.html" title="General Index"
             accesskey="I">index</a></li>
        <li class="right" >
          <a href="epub_overview.html" title="EPUB Overview"
             accesskey="N">next</a> |</li>
        <li class="right" >
          <a href="meta_editor.html" title="Meta Editor"
             accesskey="P">previous</a> |</li>
        <li><a href="contents.html">Sigil v0.4.1 documentation</a> &raquo;</li> 
      </ul>
    </div>
      <div class="sphinxsidebar">
        <div class="sphinxsidebarwrapper">
            <p class="logo"><a href="contents.html">
              <img class="logo" src="_static/small_logo.png" alt="Logo"/>
            </a></p>
  <h3><a href="contents.html">Table Of Contents</a></h3>
  <ul>
<li><a class="reference internal" href="#">Table of Contents Editor</a><ul>
<li><a class="reference internal" href="#building-the-toc">Building the TOC</a><ul>
<li><a class="reference internal" href="#creating-headings">Creating Headings</a></li>
<li><a class="reference internal" href="#generating-the-toc">Generating the <abbr>TOC</abbr></a></li>
</ul>
</li>
<li><a class="reference internal" href="#previewing-and-testing-the-toc">Previewing and Testing the <abbr>TOC</abbr></a></li>
<li><a class="reference internal" href="#displaying-different-text">Displaying Different Text</a></li>
</ul>
</li>
</ul>

  <h4>Previous topic</h4>
  <p class="topless"><a href="meta_editor.html"
                        title="previous chapter">Meta Editor</a></p>
  <h4>Next topic</h4>
  <p class="topless"><a href="epub_overview.html"
                        title="next chapter">EPUB Overview</a></p>
  <h3>This Page</h3>
  <ul class="this-page-menu">
    <li><a href="_sources/toc_editor.txt"
           rel="nofollow">Show Source</a></li>
  </ul>
<div id="searchbox" style="display: none">
  <h3>Quick search</h3>
    <form class="search" action="search.html" method="get">
      <input type="text" name="q" size="18" />
      <input type="submit" value="Go" />
      <input type="hidden" name="check_keywords" value="yes" />
      <input type="hidden" name="area" value="default" />
    </form>
    <p class="searchtip" style="font-size: 90%">
    Enter search terms or a module, class or function name.
    </p>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
        </div>
      </div>

    <div class="document">
      <div class="documentwrapper">
        <div class="bodywrapper">
          <div class="body">
            
  <div class="section" id="table-of-contents-editor">
<span id="toc-editor"></span><h1>Table of Contents Editor<a class="headerlink" href="#table-of-contents-editor" title="Permalink to this headline">¶</a></h1>
<p>A Table of Contents (<abbr>TOC</abbr>) makes navigation simpler and provides a quick overview of a book&#8217;s structure. Clicking on a <abbr>TOC</abbr> item in a <a class="reference internal" href="glossary.html#term-reading-system"><em class="xref std std-term">Reading System</em></a> &#8220;jumps&#8221; the user to that point in the book. With Sigil, you can easily create a hierarchical <abbr>TOC</abbr>.</p>
<div class="section" id="building-the-toc">
<span id="tocbuild"></span><h2>Building the TOC<a class="headerlink" href="#building-the-toc" title="Permalink to this headline">¶</a></h2>
<p>Sigil follows standard word-processor practice by creating a <abbr>TOC</abbr> from the headings used in the text. The hierarchy of your <abbr>TOC</abbr> is determined by the &#8220;level&#8221; of each heading. <em class="guilabel">Heading 1</em> produces the largest text and <em class="guilabel">Heading 6</em> the smallest. In terms of hierarchy, a higher number is the child of a lower number.</p>
<p>For example if the headings in your book are in the level order of <tt class="docutils literal"><span class="pre">1</span> <span class="pre">2</span> <span class="pre">2</span> <span class="pre">3</span> <span class="pre">3</span> <span class="pre">1</span> <span class="pre">2</span> <span class="pre">3</span> <span class="pre">4</span></tt>, they will appear like this in the <abbr>TOC</abbr>:</p>
<div class="highlight-python"><pre>Heading 1
  Heading 2
  Heading 2
    Heading 3
    Heading 3
Heading 1
  Heading 2
    Heading 3
      Heading 4</pre>
</div>
<div class="section" id="creating-headings">
<h3>Creating Headings<a class="headerlink" href="#creating-headings" title="Permalink to this headline">¶</a></h3>
<p>While in <a class="reference internal" href="main_ui.html#book-view"><em>Book View</em></a>, select the text you want to use in your <abbr>TOC</abbr>. Use the heading drop-down to apply a heading level.</p>
<div class="figure" id="fig-heading-dropdown">
<img alt="_images/heading_dropdown.png" src="_images/heading_dropdown.png" />
<p class="caption">Heading Drop-Down</p>
</div>
<p>You can also define a heading in <a class="reference internal" href="main_ui.html#code-view"><em>Code View</em></a> by placing text in heading tags. For example:</p>
<div class="highlight-html"><div class="highlight"><pre><span class="nt">&lt;h1&gt;</span>HEADING 1<span class="nt">&lt;/h1&gt;</span>
</pre></div>
</div>
<div class="admonition hint">
<p class="first admonition-title">Hint</p>
<p class="last">For the technical details regarding the storage of the Table of Contents, see <a class="reference internal" href="epub_overview.html#ncx"><em>The NCX file</em></a>.</p>
</div>
</div>
<div class="section" id="generating-the-toc">
<h3>Generating the <abbr>TOC</abbr><a class="headerlink" href="#generating-the-toc" title="Permalink to this headline">¶</a></h3>
<p>At any time you can click the <em class="guilabel">Generate |toc| from headings</em> button in the Table of Contents pane (<em class="menuselection">View ‣ Table of Contents</em>) to update your <abbr>TOC</abbr>.</p>
<div class="figure" id="fig-generate-toc">
<img alt="_images/generate_toc.png" src="_images/generate_toc.png" />
<p class="caption">The Generate <abbr>TOC</abbr> from headings button</p>
</div>
<p>When you do this the <em class="guilabel">Heading Selector</em> window will open. This window allows you to uncheck any headings you want to exclude from your <abbr>TOC</abbr>. As you uncheck headings they will be removed from the list, but not from the text.</p>
<p>Notice the <em class="guilabel">TOC items only</em> checkbox at the bottom of the dialog. If this option is checked, the list will show <em>only</em> the items that will be included in the final <abbr>TOC</abbr>. The headings that will be excluded (those that were unchecked) are not shown. Checking <em class="guilabel">TOC items only</em> shows them again.</p>
<p>Click <em class="guilabel">OK</em> to generate your <abbr>TOC</abbr>.</p>
<div class="figure" id="fig-heading-selector">
<img alt="_images/heading_selector.png" src="_images/heading_selector.png" />
<p class="caption">Heading Selector Dialog</p>
</div>
</div>
</div>
<div class="section" id="previewing-and-testing-the-toc">
<h2>Previewing and Testing the <abbr>TOC</abbr><a class="headerlink" href="#previewing-and-testing-the-toc" title="Permalink to this headline">¶</a></h2>
<p>By default a preview of the <abbr>TOC</abbr> is displayed in a pane on the right-hand side of the Sigil window. You can toggle this pane on and off by navigating to <em class="menuselection">View ‣ Table of Contents</em> or with Alt + F3 on your keyboard.</p>
<div class="figure" id="fig-toc-preview">
<img alt="_images/toc_preview.png" src="_images/toc_preview.png" />
<p class="caption"><abbr>TOC</abbr> Preview</p>
</div>
<p>This pane allows you to see how your <abbr>TOC</abbr> is structured. If you double-click on any entry you will jump to that location in your text.</p>
</div>
<div class="section" id="displaying-different-text">
<h2>Displaying Different Text<a class="headerlink" href="#displaying-different-text" title="Permalink to this headline">¶</a></h2>
<p>You may want to display a different value in the <abbr>TOC</abbr> than the actual heading text. For example, your heading may be &#8220;HEADING 1&#8221; but in the <abbr>TOC</abbr> you want it to display as &#8220;Heading 1&#8221;.</p>
<p>You can do this by locating the heading element in the <a class="reference internal" href="main_ui.html#code-view"><em>Code View</em></a> and adding a <tt class="docutils literal"><span class="pre">title</span></tt> attribute to it.</p>
<div class="highlight-html"><div class="highlight"><pre><span class="nt">&lt;h1</span> <span class="na">title=</span><span class="s">&quot;Chapter I&quot;</span><span class="nt">&gt;</span>CHAPTER I<span class="nt">&lt;/h1&gt;</span>
</pre></div>
</div>
<p>The attribute <tt class="docutils literal"><span class="pre">title</span></tt> should contain the text as you want it displayed in the <abbr>TOC</abbr>.</p>
<p>You can use the same functionality if you want an image to be the target of a <abbr>TOC</abbr> entry:</p>
<div class="highlight-html"><div class="highlight"><pre><span class="nt">&lt;h1</span> <span class="na">title=</span><span class="s">&quot;Text in TOC&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">&quot;../Images/some_image.png&quot;</span> <span class="nt">/&gt;&lt;/h1&gt;</span>
</pre></div>
</div>
</div>
</div>


          </div>
        </div>
      </div>
      <div class="clearer"></div>
    </div>
    <div class="related">
      <h3>Navigation</h3>
      <ul>
        <li class="right" style="margin-right: 10px">
          <a href="genindex.html" title="General Index"
             >index</a></li>
        <li class="right" >
          <a href="epub_overview.html" title="EPUB Overview"
             >next</a> |</li>
        <li class="right" >
          <a href="meta_editor.html" title="Meta Editor"
             >previous</a> |</li>
        <li><a href="contents.html">Sigil v0.4.1 documentation</a> &raquo;</li> 
      </ul>
    </div>

    <div class="footer">
        &copy; Copyright 2009-2011, Strahinja Marković.
      Created using <a href="http://sphinx.pocoo.org/">Sphinx</a> 1.0.7.
    </div>
<script type="text/javascript">
  (function() {
    var ga = document.createElement('script');
    ga.src = ('https:' == document.location.protocol ?
              'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    ga.setAttribute('async', 'true');
    document.documentElement.firstChild.appendChild(ga);
  })();
</script>

  </body>
</html>